<template>
  <div class="model-management">
    <div class="header">
      <el-button type="primary" @click="showAddDialog = true" :icon="Plus">
        添加模型
      </el-button>
    </div>

    <el-table :data="models" border>
      <el-table-column prop="name" label="模型名称" width="200" />
      <el-table-column prop="provider" label="提供商" width="120" />
      <el-table-column prop="modelId" label="模型ID" />
      <el-table-column prop="apiUrl" label="API地址" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status === 'active' ? 'success' : 'info'">
            {{ row.status === 'active' ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button text @click="editModel(row)" :icon="Edit">编辑</el-button>
          <el-button text @click="testModel(row)" :icon="Connection">测试</el-button>
          <el-button text @click="deleteModel(row)" :icon="Delete" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="showAddDialog" :title="editingModel ? '编辑模型' : '添加模型'" width="600px">
      <el-form :model="modelForm" label-width="100px">
        <el-form-item label="模型名称">
          <el-input v-model="modelForm.name" />
        </el-form-item>
        <el-form-item label="提供商">
          <el-select v-model="modelForm.provider" style="width: 100%">
            <el-option label="OpenAI" value="openai" />
            <el-option label="Anthropic" value="anthropic" />
            <el-option label="自定义" value="custom" />
          </el-select>
        </el-form-item>
        <el-form-item label="模型ID">
          <el-input v-model="modelForm.modelId" />
        </el-form-item>
        <el-form-item label="API地址">
          <el-input v-model="modelForm.apiUrl" />
        </el-form-item>
        <el-form-item label="API密钥">
          <el-input v-model="modelForm.apiKey" type="password" show-password />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="modelForm.status" active-text="启用" inactive-text="禁用" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="saveModel">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Edit, Delete, Connection } from '@element-plus/icons-vue'

const showAddDialog = ref(false)
const editingModel = ref(null)

const models = ref([
  {
    id: 1,
    name: 'GPT-3.5 Turbo',
    provider: 'openai',
    modelId: 'gpt-3.5-turbo',
    apiUrl: 'https://api.openai.com/v1/chat/completions',
    status: 'active'
  },
  {
    id: 2,
    name: 'GPT-4',
    provider: 'openai',
    modelId: 'gpt-4',
    apiUrl: 'https://api.openai.com/v1/chat/completions',
    status: 'active'
  }
])

const modelForm = reactive({
  name: '',
  provider: 'openai',
  modelId: '',
  apiUrl: '',
  apiKey: '',
  status: true
})

const editModel = (model) => {
  editingModel.value = model
  Object.assign(modelForm, {
    name: model.name,
    provider: model.provider,
    modelId: model.modelId,
    apiUrl: model.apiUrl,
    apiKey: '',
    status: model.status === 'active'
  })
  showAddDialog.value = true
}

const saveModel = () => {
  if (editingModel.value) {
    Object.assign(editingModel.value, {
      name: modelForm.name,
      provider: modelForm.provider,
      modelId: modelForm.modelId,
      apiUrl: modelForm.apiUrl,
      status: modelForm.status ? 'active' : 'inactive'
    })
    ElMessage.success('模型已更新')
  } else {
    models.value.push({
      id: Date.now(),
      name: modelForm.name,
      provider: modelForm.provider,
      modelId: modelForm.modelId,
      apiUrl: modelForm.apiUrl,
      status: modelForm.status ? 'active' : 'inactive'
    })
    ElMessage.success('模型已添加')
  }
  showAddDialog.value = false
  resetForm()
}

const deleteModel = (model) => {
  models.value = models.value.filter(m => m.id !== model.id)
  ElMessage.success('模型已删除')
}

const testModel = (model) => {
  ElMessage.info(`测试模型：${model.name}`)
}

const resetForm = () => {
  editingModel.value = null
  Object.assign(modelForm, {
    name: '',
    provider: 'openai',
    modelId: '',
    apiUrl: '',
    apiKey: '',
    status: true
  })
}
</script>

<style scoped lang="scss">
.model-management {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}
</style>
